import './index.css'
import { observer } from 'mobx-react-lite'
import { useStore } from '../store'
import { useState } from 'react'
import { v4 as uuid } from 'uuid'
function Task() {
  // 导入仓库
  const store = useStore()
  // 单选功能
  const checked = id => {
    store.taskStore.checked(id)
  }
  // 全选功能
  const allChecked = (e) => {
    store.taskStore.itemChecked(e.target.checked)
  }
  // 添加功能
  const [txt, setTxt] = useState('')
  const addItem = (e) => {
    if (e.key !== "Enter") return
    store.taskStore.addItem({
      id: uuid(),
      name: txt,
      isDone: !false
    })
    setTxt('')
  }
  // 删除
  const delItem=(id)=>{
    store.taskStore.delItem(id)
  }
  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          autoFocus
          autoComplete="off"
          placeholder="What needs to be done?"
          value={txt}
          onChange={(e) => setTxt(e.target.value)}
          onKeyUp={addItem}
        />
      </header>
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={store.taskStore.allChecked}
          onChange={allChecked}
        />
        <label htmlFor="toggle-all"></label>
        <ul className="todo-list">
          {store.taskStore.list.map(item => (
            <li
              className={item.isDone ? 'todo' : 'todo completed'}
              key={item.id}
            >
              <div className="view">
                <input className="toggle" type="checkbox" onChange={() => checked(item.id)} checked={!item.isDone} />
                <label >{item.name}</label>
                <button className="destroy" onClick={()=>delItem(item.id)}></button>
              </div>
            </li>
          ))}
        </ul>
      </section>
      <div>总数：{store.taskStore.list.length}</div>
      <div>已完成：{store.taskStore.okItemCount}</div>
    </section>
  )
}

export default observer(Task)